/**
 * 点击生成火花粒子溅射效果
 * @param {HTMLElement} element - 鼠标点击的元素，默认 body
 * @param {number} sparkCount - 火花粒子数量，默认 30
 * @param {number} generationRange - 粒子生成区域范围，默认以鼠标点击位置为中心的正方形 50px 范围
 * @param {number} moveRange - 粒子移动终点位置范围，默认以粒子为中心的正方形 200px 范围
 * @param {string} moveDirection - 粒子移动方向，默认 all，可选值 all、left、right、top、bottom
 * @param {number} sizeMaxRange - 粒子大小范围最大值，默认 5-20px
 * @param {number} delayMaxRange - 粒子动画延迟范围最大值，默认 0-300ms
 * @param {number} durationMaxRange - 粒子动画持续时间范围最大值，默认 1000-2000ms
 */
const createSpark = (
    element = document.body,
    sparkCount = 30,
    generationRange = 50,
    moveRange = 200,
    moveDirection = "all",
    sizeRange = 20,
    delayRange = 300,
    durationRange = 2000
) => {
    function randomColor() {
        const colors = [
            "#FFC0CB",
            "#FFA07A",
            "#FFD700",
            "#ADFF2F",
            "#87CEFA",
            "#00BFFF",
            "#00CED1",
            "#1E90FF",
            "#B0C4DE",
            "#FF69B4"
        ];
        return colors[Math.floor(Math.random() * colors.length)];
    }

    function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
    }

    // 随机位置：在鼠标点击位置方圆 50px 范围内随机位置
    function randomPosition(event, range = window.innerWidth / 2) {
        const minx = event.clientX - range;
        const maxx = event.clientX + range;
        const miny = event.clientY - range;
        const maxy = event.clientY + range;
        return { left: getRandomInt(minx, maxx), top: getRandomInt(miny, maxy) };
    }

    // 随机移动向量
    function randomVector(range = window.innerWidth / 2, direction = "all") {
        const map = {
            all: {
                x: getRandomInt(-range, range),
                y: getRandomInt(-range, range)
            },
            left: {
                x: getRandomInt(-range, 0),
                y: getRandomInt(-range, range)
            },
            right: {
                x: getRandomInt(0, range),
                y: getRandomInt(-range, range)
            },
            top: {
                x: getRandomInt(-range, range),
                y: getRandomInt(-range, 0)
            },
            bottom: {
                x: getRandomInt(-range, range),
                y: getRandomInt(0, range)
            }
        };
        return map[direction];
    }

    const sparkAnimation = div => {
        div.style.position = "fixed";
        div.style.zIndex = "9999";
        div.style.pointerEvents = "none";
        div.style.opacity = "0";
        div.style.borderRadius = "50%";
        // 随机颜色
        div.style.backgroundColor = randomColor();
        // 随机大小
        const size = getRandomInt(5, sizeRange);
        div.style.width = `${size}px`;
        div.style.height = `${size}px`;

        // 随机出现位置
        const { left, top } = randomPosition(event, generationRange);
        div.style.left = `${left}px`;
        div.style.top = `${top}px`;

        // 从生成位置移动到鼠标点击位置（粒子先聚拢再散开）
        // div.style.setProperty("--mouse-x", `${event.clientX - left}px`);
        // div.style.setProperty("--mouse-y", `${event.clientY - top}px`);

        // 随机移动向量
        const { x, y } = randomVector(moveRange, moveDirection);

        // 随机动画延迟：实现元素的随机出现
        const animationDelay = getRandomInt(0, delayRange);

        // 随机动画持续时间：实现元素的随机消失
        const animationDuration = getRandomInt(1000, durationRange);

        // JS animation API
        div.animate(
            [
                {
                    opacity: 1,
                    offset: 0.3
                },
                {
                    opacity: 0,
                    transform: `translate(${x}px, ${y}px)`
                }
            ],
            {
                duration: animationDuration,
                delay: animationDelay,
                easing: "ease-in-out",
                fill: "forwards"
            }
        );

        document.body.appendChild(div);

        setTimeout(() => {
            div.remove();
            // 注意：移除元素时间，一定要比动画时间长，至少相等，否则元素可能还没动画结束就被移除了
        }, animationDuration);
    };

    element.addEventListener("click", function (event) {
        for (let i = 0; i < sparkCount; i++) {
            const div = document.createElement("div");
            sparkAnimation(div);
        }
    });
};

//  document.body.addEventListener("click", function (event) {
//     for (let i = 0; i < 30; i++) {
//         const div = document.createElement("div");
//         div.classList.add("spark");

//         // 随机出现位置
//         const { left, top } = randomPosition(event, 50);
//         div.style.setProperty("--spark-left", `${left}px`);
//         div.style.setProperty("--spark-top", `${top}px`);

//         // 从生成位置移动到鼠标点击位置（粒子先聚拢再散开）
//         div.style.setProperty("--mouse-x", `${event.clientX - left}px`);
//         div.style.setProperty("--mouse-y", `${event.clientY - top}px`);

//         // 随机移动向量
//         const { x, y } = randomVector(200, "all");
//         div.style.setProperty("--x", `${x}px`);
//         div.style.setProperty("--y", `${y}px`);

//         // 随机动画延迟：实现元素的随机出现
//         div.style.setProperty("--delay", `${getRandomInt(0, 300)}ms`);

//         // 随机颜色
//         div.style.backgroundColor = randomColor();

//         // 随机大小
//         div.style.setProperty("--spark-size", `${getRandomInt(5, 20)}px`);

//         document.body.appendChild(div);

//         // 随机动画持续时间：实现元素的随机消失
//         const animationDuration = getRandomInt(1000, 2000);
//         div.style.setProperty("--animation-duration", `${animationDuration}ms`);
//         setTimeout(() => {
//             div.remove();
//             // 注意：移除元素时间，一定要比动画时间长，至少相等，否则元素可能还没动画结束就被移除了
//         }, animationDuration);
//     }
// });

// 随机烟花颜色

createSpark();
